<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>课程编辑-教师</title>
<link rel="stylesheet" href="${BasePath}/css/bootstrap.min.css">
<link rel="stylesheet" href="${BasePath}/css/bootstrap-pager.css">
<link rel="stylesheet" href="${BasePath}/css/bootstrap-switch.min.css">
<link rel="stylesheet" href="${BasePath}/css/common.css?v=${cssVersion}">
<style>
span{
margin:0 50px 0 0;
font-size: 14px;
}
#faceImgPath{
    width: 150px;
    height: 150px;
    margin:0 auto;
}
input[type=file] {
    display: inline;
}
.fileupload {background-color:#FFF; border:1px solid #CDCDCD;height:32px; width:70px;}
.file_input{left:370px; top:12px; height:24px;width:260px; z-index: 1; 
filter:alpha(opacity:0);opacity: 1;}
</style>
</head>
<body>
	 
	<div class="panel panel-default" style="width: 90%; margin:10px auto;">
	    <div class="panel-heading">
	        <h3 class="panel-title">课程编辑（教师）</h3>
	    </div>
	    <div class="panel-body">
	        <#if teacher??>
	            <div class="form-group">
				    <label>教师信息</label>
				    &nbsp;&nbsp;${teacher.nickName}
				    &nbsp;&nbsp;&nbsp;&nbsp;${teacher.mobile}
				</div>
			</#if>
	        
	        <#if course??>
	            <div class="form-group">
				    <label>课程系列</label>
				    <div class="input-group-btn">
					    <select class="form-control" id="courseSeries">
					    <#list series as item>
					    <option value="${item.id!-1}">${item.name!''}</option>
					    </#list>
					    </select>
				    </div> 
			        <span class="input-group-btn">  
			            <button class="btn btn-primary saveSeries">保存修改</button>  
			        </span>
				</div>
                <div class="form-group">
				    <label for="cTitle">课程标题</label>&nbsp;&nbsp;${course.title!''}
				</div>
				<div class="form-group">
				    <label for="cDesc">课程简介</label>&nbsp;&nbsp;${course.descr!''}
				</div>
				<div class="form-group">
				    <label for="cContent">课程内容</label>
				    <textarea id="cContent" class="form-control" rows="5" readonly>
				    ${course.content!''}
				    </textarea>
				</div>
				<div class="form-group">
				    <label>课程价格</label>
				    <div class="input-group-btn">
				    <input type="text" class="form-control" id="cPrice" value="${course.price}">
				    </div>
				    <span class="input-group-btn">
				    	<button class="btn btn-primary savePrice">保存修改</button>  
				    </span>
				</div>
			    <div class="form-group">
				    <label for="isFree">是否收费</label>&nbsp;&nbsp;
				    <#if course.isFree == 0>是
				    <#else>否
				    </#if>
				</div>
				<div class="form-group">
				    <label for="clickNum">点击次数</label>&nbsp;&nbsp;${course.clickNum}
				</div>
				<div class="form-group">
	            	<label>课程置顶</label>&nbsp;&nbsp;
	            	<#if course.setTop == 1>置顶
	            	<#else>未置顶
	            	</#if>
				</div>
				<div class="form-group">
	            	<label>课程试听</label>
				    <audio src="${course.radioLink}" controls="controls" id="cAudio" style="vertical-align:middle;">
					</audio>
				</div>
				
				<div class="form-group">
	            	<label>课程封面</label>
					<div class="form-group">
						<!-- <img src="${course.faceImgPath!''}" controls="controls" id="faceImgPath" style="vertical-align:middle;" /> -->
						<!-- <label for="radionFile">修改课程封面</label> -->
						<input type="file" id="imgFiles"  class="file_input" multiple accept="image/*">
						<button class="btn btn-primary savefaceImg">上传</button>  
					</div>
				</div>
	        </#if>
	    </div>
	</div>

	<script type="text/javascript" src="${BasePath}/js/jquery-3.3.1.min.js"></script>  
	<script type="text/javascript" src="${BasePath}/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="${BasePath}/js/bootstrap-switch.min.js"></script>
	<script type="text/javascript" src="${BasePath}/js/teacherAjaxHeader.js?v=${jsVersion}"></script>
	<script type="text/javascript">
	$(".saveSeries").click(function(){
		var seriesId = $('option:selected').val();
		if(seriesId == -1){
			alert('无')
		}
		alert(seriesId)
	});
	$(".savePrice").click(function(){
		var price = $("#cPrice").val();
		var ret = updPrice('${course.id}', price);
		if(ret == true){
			alert("修改成功")
		}
		else{
			alert("修改失败")
		}
	});
	//取消置顶
	$(".btnCancelTop").click(function(){
		var ret = cancelSetTop('${course.id}');
		console.log(ret);
		if(ret){
			alert("取消置顶成功");
			location.reload();
		}
		else{
			alert("取消置顶失败");
		}
	});
	
	//置顶收费区
	$(".btnTop").click(function(){
		var ret = setTop('${course.id}', false);
		console.log(ret);
		if(ret){
			alert("置顶收费区成功");
			location.reload();
		}
		else{
			alert("置顶免费区失败");
		}
	});
	
	//置顶免费区
	$(".btnTopFree").click(function(){
		var ret = setTop('${course.id}', true);
		console.log(ret);
		if(ret){
			alert("置顶免费区成功");
			location.reload();
		}
		else{
			alert("置顶免费区失败");
		}
		
	});


	function cancelSetTop(ids){
		var courseRequest = {
				ids: ids
		};
		var req = {requestData: JSON.stringify(courseRequest)};
		var ret = false;
		$.ajax({
			url: "${BasePath}/api/course/cancelTop",
			type:'POST',
			contentType : "application/json; charset=utf-8",
			data: JSON.stringify(req),
			dataType:'json',
			async: false,
			success:function (data) {
				console.log("data=" + JSON.stringify(data));
				if(data == null){
					console.log("没有数据");
					return;
				}
				ret = Boolean(data.responseData);
			}
		});
		return ret;
	}
	
	function setTop(ids, free){
		var courseRequest = {
				ids: ids
		};
		var url = '${BasePath}/api/course/setTopCharge';
		if(free == true){
			url = '${BasePath}/api/course/setTopFree';
		}
		var req = {requestData: JSON.stringify(courseRequest)};
		var ret = false;
		$.ajax({
			url: url,
			type:'POST',
			contentType : "application/json; charset=utf-8",
			data: JSON.stringify(req),
			dataType:'json',
			async: false,
			success:function (data) {
				console.log("data=" + JSON.stringify(data));
				if(data == null){
					console.log("没有数据");
					return;
				}
				ret = Boolean(data.responseData);
			}
		});
		return ret;
	}
	
	
	function updPrice(courseId, price){
		var courseRequest = {
			courseId: courseId,
			price: price
		};
		var url = '${BasePath}/api/course/price_upd';
		var req = {requestData: JSON.stringify(courseRequest)};
		var ret = false;
		$.ajax({
			url: url,
			type:'POST',
			contentType : "application/json; charset=utf-8",
			data: JSON.stringify(req),
			dataType:'json',
			async: false,
			success:function (data) {
				console.log("data=" + JSON.stringify(data));
				if(data == null){
					console.log("没有数据");
					return;
				}
				ret = Boolean(data.responseData);
			}
		});
		return ret;
	}
	
	$(".savefaceImg").click(function(){
		//var ret = setTop('${course.id}', true);
		if($("#imgFiles").val() == ""){
			alert('请选择封面！');
			return;
		}
		console.log($("#imgFiles")[0].files[0])
		var courseRequest = {
			courseId: '${course.id}',
		};
		var formData = new FormData();
		formData.append("requestData",JSON.stringify(courseRequest));
		formData.append("files",$("#imgFiles")[0].files[0]);
		var url = '${BasePath}/api/course/updateFace';
		var req = {"requestData": JSON.stringify(courseRequest),"files": $("#imgFiles")[0].files[0]};
		var ret = false;
		$.ajax({
			url: url,
			type:'POST',
			//contentType : "application/json; charset=utf-8",
			processData : false, // 告诉jQuery不要去处理发送的数据
            contentType : false,
			data: formData,
			//dataType:'json',
			//async: false,
			success:function (data) {
				console.log("data=" + JSON.stringify(data));
				if(data.code ==200){
					//console.log("没有数据");
					alert("课程封面修改成功！")
            		location.href = "${BasePath}/page/teacher/courses";
				}
			}
		});
	});
	
	</script>
</body>
</html>